<template>
  <div>

    <el-row>
      <el-col span="6" v-for="space in tableData">
        <el-card style="width: 280px;height: 330px;background-color: rgba(255,255,255,0.3);margin: 10px 10px">
          <div><img style="width: 100%; height: 100%" src="../assets/imgs/car.webp" alt=""></div>
          <span>区域：{{space.location}}</span>
          <br>
          <span>车位号：{{space.locationNumber}}</span>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      remainder:''
    };
  },
  methods: {

    //请求车位列表
    loadParkingSpaceList() {
      let url = 'http://localhost:8080/ParkingSpace/getFreeSpaceList'
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.tableData = responseBody.data;
        }
      });

    }
  }
  ,
  created() {
    this.loadParkingSpaceList()
  }
}
</script>
